<template>
    <div>
      <el-row type="flex" align="center" justify="center" style="margin-top:96px;margin-right:20pt;padding: 28px 18px 0 18px;">
        <p style="color:white;font-size:40px;margin-top:20pt;text-align:center">正在开发中</p>
      </el-row>
    </div>
</template>
<script>
var startTime = "";
var endTime = "";
import chart from "../../../../components/Charts/newChart";
import ICountUp from "vue-countup-v2";
import { GetDataByTarget, GetAccountsReceivableDetail } from "@/api/gq/index";
import echarts from "echarts";
import bgLayOut from "@/components/bgLayOut/index";
import myTable from "@/components/branch/myTable";
export default {
  name: "sellAnalysis",
  components: {
    chart,
    ICountUp,
    bgLayOut,
    myTable
  },
  // props: ["time"],
  // watch: {
  //   time(res){
  //     this.time = res
  //     this.fetchData()
  //   }
  // },
  data() {
    return {
      tableData: [],
      tableHeads: [
        { key: "departmentName", name: "分公司名称" },
        { key: "customerShortName", name: "客户经理" },
        { key: "employeeName", name: "客户名称" },
        { key: "noPay", name: "应收账款" },
        { key: "zhangPeriod", name: "账龄" }
      ],
      sumProcurementOption: {}, // 分公司应收账款
      // warehouseDaySaleOption: {}, //账户类型
      daySaleOption: {}, // 客户类型
      itemW: 0,
      offsetL: 0,
      nowId: 0,
      workNum: 0,
      startVal: 0,
      decimals: 0,
      duration: 2.5,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ",",
        decimal: ".",
        prefix: "",
        suffix: ""
      },
      topNav: [
        {
          name: "浩得钢圈驾驶舱",
          id: ""
        },
        {
          name: "销售分析",
          id: "9003"
        },

        {
          name: "应收账款",
          id: "9005"
        },
        {
          name: "库存/差价",
          id: "9007"
        }
      ],
      need_allnums: 0,
      sell_allnums: 62433498,
      storesIncome: true // 选中状态
      // storeId: ""
    };
  },
  mounted() {
    this.fetchData(); // 获取数据
    // this.storeId = this.$route.query.storeId;
    this.onNav("", 0);
  },
  methods: {
    async fetchProcurementDetail() {
      try {
        var params = {
          customerType: ""
        };
        var res = await GetAccountsReceivableDetail(params);
        if (res.data.code == "0") {
          this.tableData = res.data.result;
        }
      } catch (e) {
        console.log(e);
      }
    },
    formatterPieTwo(res, params, unit) {
      var minResult = "";
      if (res[0].list) {
        res[params.dataIndex].list.forEach((item, id) => {
          var minItem =
            '<div style="display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:0 10px"><span>' +
            item.name +
            '</span><span style="margin-top:2px;font-size:20px;font-family:DIN Condensed Bold">' +
            item.value +
            "</span></div>";
          minResult += minItem;
        });
      }
      var val = params.data.value;
      var imgConStart =
        '<div style="display:flex;padding:15pt 12pt 12pt 12pt;color:' +
        params.color +
        ';flex-direction:column;background:rgba(0,0,0,0.7);border-radius:10px;">' +
        '<span style="width:100%;font-size:30px;font-family:DIN Condensed Bold">' +
        val +
        "</span>" +
        '<div style="width:100%;display:flex;align-items:center;justify-content:space-between;flex-direction:row;margin-top:8pt;font-size:12px">';

      var result =
        minResult == ""
          ? imgConStart + "</div>"
          : imgConStart + minResult + "</div>";
      return result;
    },
    // 分公司应收账款
    async fetchSumProcurement() {
      try {
        var params = {
          statisticalTime: this.time,
          queryType: "24002"
        };
        var res = await GetDataByTarget(params);
        if (res.data.code == "0") {
          this.$set(this, "need_allnums", res.data.result.total);
          var data = res.data.result.list;
          var unit = "应收账款 (万元)";
          var option = this.returnBarOption(data, unit, "#31cee6", "#6937fd");
          this.$set(this, "sumProcurementOption", option);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 账户类型统计
    //  async fetchWarehouseDaySale() {
    //      try {
    //       var params = {
    //         statisticalTime: this.time,
    //         queryType: "24013"
    //       };
    //       var res = await GetDataByTarget(params);
    //       if (res.data.code == "0") {
    //          var unit = "个";
    //           var colorArr = ["cyan", "#0080FF"];
    //           var data = res.data.result.list
    //           this.setPieOption("warehouseDaySaleOption", data, unit, "10%", colorArr);
    //       }
    //     } catch (e) {
    //       console.log(e);
    //     }
    //   },
    // 客户类型统计
    async fetchDaySale() {
      try {
        var params = {
          statisticalTime: this.time,
          queryType: "24012"
        };
        var res = await GetDataByTarget(params);
        if (res.data.code == "0") {
          var unit = "人";
          var data = res.data.result.list;
          var colorArr = ["yellow", "cyan", "red", "green"];
          this.setPieOption("daySaleOption", data, unit, "10%");
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 新建  pie Option
    // optionName：option ，res：数据 ， right：距离  ，colorArr ：颜色数组
    setPieOption(optionName, res, unit, right, colorArr) {
      var data = [];
      var xData = [];
      var self = this;
      var unit = unit;
      var seriesObj = {
        type: "pie",
        radius: ["50%", "60%"],
        label: {
          formatter: "{b} \n {d}%",
          fontSize: 20,
          position: "inside",
          color: "#fff",
          fontFamily: "DIN Condensed Bold"
        },
        data: []
      };
      res.forEach(item => {
        var xObj = {
          name: "",
          icon: "circle",
          textStyle: {
            color: "#31cee6",
            fontSize: 14,
            padding: [0, 10]
          }
        };
        xObj.name = item.xData ? item.xData : item.name;
        xData.push(xObj);
        var obj = {};
        obj.name = item.xData ? item.xData : item.name;
        obj.value = item.value;
        var secObj = {
          value: 10,
          name: "",
          label: {
            show: false
          },
          tooltip: { show: false },
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              color: "transparent",
              borderColor: "transparent",
              borderWidth: 0
            }
          }
        };

        seriesObj.data.push(obj, secObj);
      });
      var option = {
        color: colorArr ? colorArr : [],
        tooltip: {
          trigger: "item",
          formatter: params => this.formatterPieTwo(res, params, unit)
        },
        legend: {
          data: xData,
          right: right ? right : "0%"
        },
        series: [seriesObj]
      };
      this[optionName] = option;
    },
    // unit:单位  startColor:开始的颜色  endColor:结束的颜色
    returnBarOption(res, unit, startColor, endColor) {
      var xData = [];
      var unit = unit;
      var symbolClip = true;
      var max = 0;
      var data1 = {
        type: "bar",
        name: "",
        label: {
          normal: {
            show: true,
            position: "top",
            textStyle: {
              color: startColor,
              fontWeight: "bold",
              fontFamily: "DIN Condensed Bold",
              fontSize: "22"
            }
          }
        },
        itemStyle: {
          normal: {
            barBorderRadius: [30, 30, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: startColor
              },
              {
                offset: 1,
                color: endColor
              }
            ])
          }
        },
        z: 10,
        symbolBoundingData: max,
        data: [],
        barWidth: 21
      };
      res.forEach(item => {
        xData.push(item.name);
        var obj = {};
        max = Number(item.value) > max ? Number(item.value) : max;
        obj.value = item.value;
        obj.symbolClip = symbolClip;
        data1.data.push(obj);
      });
      data1.symbolBoundingData = max;
      var option = {
        xAxis: {
          data: xData,
          axisLabel: {
            rotate: 45,
            formatter: function(value, index) {
              return "{value|" + value + "}";
            }
          }
        },
        yAxis: {
          name: unit,
          nameGap: 30,
          nameTextStyle: {
            color: "#31cee6"
          }
        },
        legend: {
          show: false
        },
        tooltip: {
          axisPointer: {
            shadowStyle: {
              color: {
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0,0,0,0)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0,209,255,0.2)" // 100% 处的颜色
                  }
                ]
              }
            }
          },
          formatter: params => this.formatterModal(res, params, unit)
        },
        grid: {
          bottom: "20%",
          left: "15%"
        },
        series: [data1]
      };
      return option;
    },
    onNav(itemId, id) {
      this.nowId = id;
      this.groupPlate = itemId;
      var itemW = this.$refs["item" + id][0].offsetWidth - 10;
      var itemL = this.$refs["item" + id][0].offsetLeft + 5; // 当前元素距离父节点的左边 水平距离 ,距离父节点的偏移量
      this.$set(this, "offsetL", itemL);
      this.$set(this, "itemW", itemW);
      this.fetchData(); // 获取数据
    },
    formatterModal(res, params, unit, color) {
      var minResult = "";
      if (res[0].list) {
        res[params[0].dataIndex].list.forEach(item => {
          var minItem =
            '<div style="display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:0 10px"><span>' +
            item.name +
            '</span><span style="margin-top:2px;font-size:20px;font-family:DIN Condensed Bold">' +
            item.value +
            "</span></div>";
          minResult += minItem;
        });
      }
      var index = params[0].dataIndex;
      var val = res[index].value;
      var nowColor = color ? color : "#31cee6";
      var imgConStart =
        '<div style="display:flex;padding:12pt 10px;color:' +
        nowColor +
        ';flex-direction:column;background:rgba(0,0,0,0.7);border-radius:10px;">' +
        '<span style="width:100%;font-size:30px;padding:8pt 0 0 0 ;font-family:DIN Condensed Bold">' +
        val +
        "</span>" +
        '<div style="width:100%;display:flex;align-items:center;justify-content:space-between;flex-direction:row;margin-top:8pt;font-size:12px">';

      var result =
        minResult == ""
          ? imgConStart + "</div>"
          : imgConStart + minResult + "</div>";
      return result;
    },
    // 获取数据
    fetchData() {
      // 客户类型统计
      this.fetchDaySale();
      // 账户类型统计
      // this.fetchWarehouseDaySale();
      // 分公司应收账款
      this.fetchSumProcurement();
      this.fetchProcurementDetail();
    },
    // 跳页面
    pushPage(name) {
      this.$router.push({
        path: name
      });
    }
  }
};
</script>
<style scoped>
@import "../main.css";
/* @import "../../../../styles/element-ui/tableStyle.scss"; */
.topLeftCon {
  display: flex;
  margin-left: 2px;
  align-items: center;
  justify-content: center;
  margin-top: 20pt;
  background-image: url("../../../../../static/img/bigData4/board_s.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 373px;
  height: 393px;
  color: #2ff0d2;
}
.itemTopText {
  font-size: 20px;
  margin-left: 10px;
}
.bottomSelBtn {
  margin-right: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.bottomSelBtn .storeUnActive .el-button {
  background: transparent;
  border: 0;
  color: #1776fd;
}
.bottomSelBtn .storeActive .el-button {
  background: #1776fd;
  border: 1px solid #1776fd;
  color: black;
}

.topLeftItem .itemTop {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  color: #2ff0d2;
}
.topLeftItem .itemTopIcon {
  width: 20px;
  height: 21px;
}
.topLeftItem {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin-top: 38px;
  margin-left: 106px;
}
.topLeftItem:first-child {
  margin-left: 0px;
}

.topLeftItem:nth-child(4) {
  margin-left: 0px;
}

.lineImg {
  width: 1712px;
  height: 8px;
  background-image: url("../../../../../static/img/bigData4/minLine.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #2ff0d2;
}

/*.lineCon {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
}*/
.chartLine {
  width: 1px;
  height: 332px;
  background: rgba(49, 206, 230, 0.2);
  position: absolute;
  right: 0;
  top: 10%;
}
.minTopLeftCon {
  position: relative;
  margin-top: 10px;
}
.midCon {
  display: flex;
  margin-left: 20px;
  margin-top: 10px;
  padding: 60px;
  flex-direction: column;
  justify-content: space-between;
  width: 1840px;
  height: 792px;
  background-image: url("../../../../../static/img/bigData4/board_xl.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #2ff0d2;
}
.topRightLLine {
  display: flex;
  align-items: center;
  margin-left: 36pt;
  margin-top: 12pt;
}
.topRightLTopTitle {
  font-size: 20px;
  margin-left: 6pt;
}
.topRightLTopTitleLine {
  width: 3px;
  height: 14px;
  margin-top: 6px;
  background: #2ff0d2;
}
/*.topRightCon span {
  font-size: 50px;
  line-height: 60px;
  margin-top: 2px;
}*/
.topLeftCon span {
  font-size: 50px;
  line-height: 60px;
  margin-top: 2px;
}
.topRightCon {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  margin-top: 20pt;
  background-image: url("../../../../../static/img/bigData4/board_m.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 1446px;
  height: 393px;
  color: #2ff0d2;
}
.topBottomLines {
  bottom: -6pt;
  transition: left 0.5s;
  left: 0;
  height: 3px;
  background: #31cee6;
  position: absolute;
}

.active {
  font-weight: bold;
}
.topNavaArrItem {
  display: flex;
  color: rgba(49, 206, 230, 0.8);
  font-size: 18px;
  cursor: pointer;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 13px;
  height: 16px;
  border-left: 1px solid rgba(49, 206, 230, 0.2);
}
.topNavaArrItem:nth-child(1) {
  border-left: 0;
}
.topNavs {
  position: relative;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12pt;
}
.topNavArr {
  width: 100%;
  display: flex;
  height: 79px;
  align-items: flex-end;
  justify-content: center;
}
.itemTop {
  text-align: center;
  color: #2ff0d2;
}
.changeCen-right-tableData-content {
  position: relative;
}
.changeCen-right-tableData-content:after {
  content: "";
  position: absolute;
  top: 0;
  left: 20%;
  width: 1px;
  height: 730px;
  background-color: rgba(47, 240, 210, 0.3);
}
.changeCen-right-tableData-content p {
  display: flex;
  margin-top: 40px;
  margin-bottom: 0;
  color: #2ff0d2;
  font-size: 18px;
  border-bottom: 1px solid rgba(47, 240, 210, 0.3);
}
.changeCen-right-tableData-content p span {
  width: calc(100% / 5);
  height: 62px;
  line-height: 62px;
  text-align: center;
}
.changeCen-right-tableData-content-list {
  padding-top: 34px;
  padding-bottom: 34px;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  list-style: none;
}
.changeCen-right-tableData-content-list li {
  display: flex;
  margin-bottom: 34px;
  color: #2ff0d2;
  font-size: 18px;
}
.changeCen-right-tableData-content-list li span {
  width: calc(100% / 5);
  text-align: center;
}
.changeCen-i {
  display: inline-block;
  width: 3px;
  height: 14px;
  margin-top: 6px;
  margin-right: 6px;
  background-color: #2ff0d2;
}
</style>
